/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 * limitations under the License.
 */

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:hadss_avoid_area/component/folder_stack.dart';

class FolderStackUI extends StatefulWidget {
  const FolderStackUI({super.key});

  @override
  State<FolderStackUI> createState() => _MyAppState();
}

class _MyAppState extends State<FolderStackUI> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FolderStack(
        upperItems: const ["item1", "item2"],
        onFolderStateChange: (state) {
          if (kDebugMode) {
            print("state=$state");
          }
        },
        children: [
          Container(
            key: const ValueKey('item1'),
            width: double.infinity,
            height: double.infinity,
            color: Colors.red,
            child: const Center(
              child: Text("背景"),
            ),
          ),
          Container(
            key: const ValueKey('item2'),
            color: Colors.blue,
            width: double.infinity,
            margin: const EdgeInsets.all(20),
            height: 30,
            child: const Text(
              "弹幕",
              textAlign: TextAlign.center,
            ),
          ),
          Container(
            color: Colors.yellow,
            child: const Text("标题，返回"),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              width: double.infinity,
              height: 100,
              color: Colors.grey,
              alignment: Alignment.center,
              child: const Text(
                "进度条",
                textAlign: TextAlign.center,
              ),
            ),
          )
        ],
      ),
    );
  }
}
